<template>
<div class="echarts-hasSelect">
  <el-select v-model="select.current" size="mini" style="width:110px" :popper-append-to-body="false" filterable placeholder="选择项目部">
    <el-option
      v-for="item in select.options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <echartsInit :chartOption="chartOption"></echartsInit>
</div>
</template>
<script>
import themeChart from "@/mixins/themeChart"
export default {
  components: { },
  mixins: [themeChart],
  data() {
    return {
      select:{
        options: [
          { value: 'a', label: '项目部A' }, 
          { value: 'b', label: '项目部B' }, 
        ],
        current: 'a'
      },
      chartData:{
        legend:['预算成本', '实际成本'],
        yAxis:['待上报', '流转中', '已上报'],
        colors:[$c.cbm6,$c.cym3],
        data:[
          [320, 302, 341,],
          [220, 332, 201, ],
        ],
      },
      chartOption:{ }
    }
  },
  watch:{
    "select.current"(val1,val2){
      let dr=A("rd",{
        min:100,
        max:400,
        length:6,
        group:2
      })
      this.chartData.data[0]=dr[0]
      this.chartData.data[1]=dr[1]
      this.chartOption.update=true;
      this.processData();
    }
  },
  computed: {},
  methods: {
    processData(){
      let {legend,colors,yAxis,data}=this.chartData,
          processedData=[];
      legend.forEach((item,i)=>{
        processedData.push({
          name: legend[i],
          type: 'bar',
          barWidth:10,
          // stack: 'Total',
          // label: { show: true },
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            color: $c.fade(colors[i],.9),
            borderRadius: 3
          },
          data: data[i]
        })
      })
      this.chartOption.legend.data=legend;
      this.chartOption.series=processedData;
      this.chartOption.yAxis.data=yAxis;
    },
    processOption(){
      const {getColor}=this
      this.chartOption={
        update:false,
        // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          //icon: 'rect',
          orient: 'vertical',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 5,
          left: '10',
          top: '10',
          textStyle: {
            //fontSize: 12,
            color: getColor("staFCW")
          }
        },
        grid: {
          left: '5%',
          right: '10%',
          bottom: '8%',
          top: "20%",
          containLabel: true
        },
        xAxis: { 
          type: 'value',
          axisLine: {
            lineStyle: {
              color:getColor("lineAX")
            },
          },
          splitLine: {
            lineStyle: {
              color: getColor("lineSP")
            },
          },
          axisLabel: {
            color:getColor("staFC"),
            align: 'center',
            interval:0,
            // rotate:45,
            // margin:20,
            // textStyle : { color :$c.blm3, align : 'center',fontSize :12 },
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          data: [],
          axisLine: {
            show:false,
            lineStyle: {
              color:getColor("lineAX")
            },
          },
          splitLine: {
            show:false,
            lineStyle: {
              color: getColor("lineSP")
            },
          },
          axisLabel: {
            formatter: '{value}',
            color:getColor("staFC"),
            align: 'right'
          }
        }
      }
      this.processData();
    },
    chartTheme(){
      const {chartData,getPalette,oriColors}=this
      chartData.colors=getPalette({ actual:2,pickType:"rdm" })
    }
  },
  mounted() {
		this.processOption();
  }
}
</script>

<style lang="less">

</style>
